<template>
  <view class="tab-container">
    <!-- 待处理标签 -->
    <view class="tab-box" v-if="tabType === 'pending'">
      <view class="tab-item" 
            :class="{active: activeNumber === 0}" 
            @tap="handleTabChange(0, 'pending')">
        {{selectedText}}<uni-icons type="down" size="10"></uni-icons>
      </view>
      <view class="tab-item" 
            :class="{active: activeNumber === 1}" 
            @tap="handleTabChange(1, 'pending')">未审批</view>
      <view class="tab-item" 
            :class="{active: activeNumber === 2}" 
            @tap="handleTabChange(2, 'pending')">审批中</view>
      <view class="tab-item" 
            :class="{active: activeNumber === 3}" 
            @tap="handleTabChange(3, 'pending')">待销假</view>
      <view class="tab-item" 
            :class="{active: activeNumber === 4}" 
            @tap="handleTabChange(4, 'pending')">待延假</view>
    </view>
    
    <!-- 已审批标签 - 添加水平滚动 -->
    <scroll-view 
      v-if="tabType === 'approval'"
      scroll-x 
      class="tab-box approval-tab"
      :show-scrollbar="false"
      enhanced
      :scroll-top="scrollTop"
      :scroll-into-view="'tab-' + activeNumber"
    >
      <view class="tab-list">
        <view class="tab-item" 
              :id="'tab-0'"
              :class="{active: activeNumber === 0}" 
              @tap="handleTabChange(0, 'approval')">
          {{selectedText}}<uni-icons type="down" size="10"></uni-icons>
        </view>
        <view class="tab-item" 
              :id="'tab-1'"
              :class="{active: activeNumber === 1}" 
              @tap="handleTabChange(1, 'approval')">已审批</view>
        <view class="tab-item" 
              :id="'tab-2'"
              :class="{active: activeNumber === 2}" 
              @tap="handleTabChange(2, 'approval')">已销假</view>
        <view class="tab-item" 
              :id="'tab-3'"
              :class="{active: activeNumber === 3}" 
              @tap="handleTabChange(3, 'approval')">已延期</view>
        <view class="tab-item" 
              :id="'tab-4'"
              :class="{active: activeNumber === 4}" 
              @tap="handleTabChange(4, 'approval')">销假超时</view>
        <view class="tab-item" 
              :id="'tab-5'"
              :class="{active: activeNumber === 5}" 
              @tap="handleTabChange(5, 'approval')">驳回审核</view>
        <view class="tab-item" 
              :id="'tab-6'"
              :class="{active: activeNumber === 6}" 
              @tap="handleTabChange(6, 'approval')">驳回延假</view>
      </view>
    </scroll-view>
    <message-tab ref="showTab" @select="handleCategorySelect"></message-tab>
  </view>
</template>

<script>
export default {
  name:"pending-tab",
  props: {
    tabType: {
      type: String,
      default: 'pending',
      // 这里的问题后面修改
      // validator: value => ['pending', 'approval'].includes(value)
    },
    defaultActiveTab: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      activeNumber: 1,
      selectedText: '分类',
      selectedType: '',
      // 滚动条的滑动的距离
      scrollTop: 0,
      queryParams: {
        approvalStatus: null,
        revokeStatus: null,
        extensionStatus: null
      },
      // 定义状态常量
      STATUS: {
        PENDING: {
          UNPROCESSED: 0,
          IN_PROGRESS: 1,
          APPROVED: 2,
          REJECTED: 3
        },
        REVOKE: {
          UNPROCESSED: 0,
          PENDING: 1,
          APPROVED: 2,
          TIMEOUT: 3
        },
        EXTENSION: {
          UNPROCESSED: 0,
          PENDING: 1,
          APPROVED: 2,
          REJECTED: 3
        }
      }
    };
  },
  created() {
    // 初始化活动标签
    this.activeNumber = this.defaultActiveTab;
  },
  methods: {
    /**
     * 处理标签切换
     * @param {Number} tabNumber - 标签索引
     * @param {String} type - 标签类型 ('pending' 或 'approval')
     */
    handleTabChange(tabNumber, type) {
      this.resetQueryParams();
      this.activeNumber = tabNumber;
      
      // 如果点击的是分类标签，显示分类选择器
      if (tabNumber === 0) {
        this.$refs.showTab.showDrawer();
        return;
      }
      
      // 根据标签类型和索引设置查询参数
      if (type === 'pending') {
        this.setPendingQueryParams(tabNumber);
        this.$emit('activeNum', this.activeNumber);
        
        // 特殊情况：未审批标签
        if (tabNumber === 1) {
          this.$emit('tabChange', 'origin');
          return;
        }
        
        this.$emit('tabChange', this.queryParams);
      } else if (type === 'approval') {
        this.setApprovalQueryParams(tabNumber);
        this.$emit('pendupdate', this.queryParams);
      }
    },
    
    /**
     * 设置待处理标签的查询参数
     * @param {Number} tabNumber - 标签索引
     */
    setPendingQueryParams(tabNumber) {
      switch(tabNumber) {
        case 2: // 审批中
          this.queryParams.approvalStatus = this.STATUS.PENDING.IN_PROGRESS;
          break;
        case 3: // 待销假
          this.queryParams.revokeStatus = this.STATUS.REVOKE.PENDING;
          this.queryParams.approvalStatus = this.STATUS.PENDING.APPROVED;
          break;
        case 4: // 待延假
          this.queryParams.approvalStatus = this.STATUS.PENDING.APPROVED;
          this.queryParams.extensionStatus = this.STATUS.EXTENSION.PENDING;
          break;
      }
    },
    
    /**
     * 设置已审批标签的查询参数
     * @param {Number} tabNumber - 标签索引
     */
    setApprovalQueryParams(tabNumber) {
      switch(tabNumber) {
        case 1: // 已审批
          this.queryParams.approvalStatus = this.STATUS.PENDING.APPROVED;
          break;
        case 2: // 已销假
          this.queryParams.revokeStatus = this.STATUS.REVOKE.APPROVED;
          break;
        case 3: // 已延期
          this.queryParams.extensionStatus = this.STATUS.EXTENSION.APPROVED;
          break;
        case 4: // 销假超时
          this.queryParams.revokeStatus = this.STATUS.REVOKE.TIMEOUT;
          break;
        case 5: // 驳回审核
          this.queryParams.approvalStatus = this.STATUS.PENDING.REJECTED;
          break;
        case 6: // 驳回延假
          this.queryParams.extensionStatus = this.STATUS.EXTENSION.REJECTED;
          break;
      }
    },
    
    /**
     * 处理分类选择
     * @param {Object} category - 分类数据
     */
    handleCategorySelect(category) {
      this.selectedText = category.text;
      this.selectedType = category.type;
      this.$emit('pendSelect', this.selectedType);
    },
    
    /**
     * 重置查询参数
     */
    resetQueryParams() {
      Object.keys(this.queryParams).forEach(key => {
        this.queryParams[key] = null;
      });
    },
    /**
     * @description 重置第一个tab
     */
    resetToFirstTab() {
      this.activeNumber = 1
      this.selectedText = '分类'
      this.selectedType = ''
      this.resetQueryParams()
      this.scrollTop = this.scrollTop ? 0: 1
      
      // 触发第一个tab的更新
      if(this.tabType === 'approval') {
        this.setApprovalQueryParams(1)
        this.$emit('pendupdate',this.queryParams)
      }
    }
  }
}
</script>

<style lang="scss">
.tab-container {
  .tab-box {
    display: flex;
    margin-top: 20rpx;
    padding: 20rpx;
    
    // 待处理标签样式保持不变
    &:not(.approval-tab) {
      .tab-item {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #666;
        position: relative;
        
        &.active {
          color: #2b7ff3;
          font-weight: bold;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -10rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background-color: #2b7ff3;
          }
        }
      }
    }
    
    // 已审批标签样式
    &.approval-tab {
      width: 100%;
      white-space: nowrap;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .tab-list {
        display: inline-flex;
        padding: 0 10rpx;
        
        .tab-item {
          display: inline-block;
          padding: 0 30rpx;
          font-size: 28rpx;
          color: #666;
          position: relative;
          white-space: nowrap;
          
          &.active {
            color: #2b7ff3;
            font-weight: bold;
            
            &::after {
              content: '';
              position: absolute;
              bottom: -10rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 40rpx;
              height: 4rpx;
              background-color: #2b7ff3;
            }
          }
        }
      }
    }
  }
}
</style>

<!--  使用scroll-启动水平滚动 
      :show-scrollbar="false" 隐藏滚动条
      enhanced属性优化滚动性能
      使用 :scroll-into-view 实现选中标签自动滚动到可视区域
      修改样式结构，使用 display: inline-flex 实现水平排列
      添加 white-space: nowrap 确保标签在同一行
-->